<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="keywords" content="jquery,ui,easy,easyui,web">
	<meta name="description" content="easyui help you build your web page easily!">
	<title>jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="jeasyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="jeasyui/themes/icon.css">
	<script type="text/javascript" src="jeasyui/jquery.min.js"></script>
	<script type="text/javascript" src="jeasyui/jquery.easyui.min.js"></script>

</head>

<body>
	<div id="tree" class="easyui-tree"></div>
	<input type="button" value="获取选中的" onclick="showChecked()">
	<input type="button" value="重置" onclick="resetSelected()">
	<input type="button" value="全选" onclick="selectAll()">
	<input type="button" value="反选" onclick="reverseSelect()">
	<script type="text/javascript">
		/*
		var nodes = $('#tt').tree('getChecked');    // get checked nodes
var nodes = $('#tt').tree('getChecked', 'unchecked');   // 获取未选择节点
var nodes = $('#tt').tree('getChecked', 'indeterminate');   // 获取不确定的节点
		*/
		function showChecked() {
			var nodes = $('#tree').tree('getChecked');
			var s = '';
			for (var i = 0; i < nodes.length; i++) {
				if (s) s += ',';
				s += nodes[i].text;
			}
			alert(s);
			console.log(nodes);
			console.log(s);
		}

		function resetSelected() {
			let tree = $('#tree');
			let checkedNodes = tree.tree('getChecked');
			for (var i = 0; i < checkedNodes.length; i++) {
				tree.tree('uncheck', checkedNodes[i].target);
			}
		}

		function selectAll() {
			let tree = $('#tree');
			let checkedNodes = tree.tree('getChecked', 'unchecked'); ;
			for (var i = 0; i < checkedNodes.length; i++) {
				tree.tree('check', checkedNodes[i].target);
			}
		}

		function reverseSelect() {
			let tree = $('#tree');
			let checkedNodes = tree.tree('getChecked');
			let uncheckedNodes = tree.tree('getChecked', 'unchecked');
			for (var i = 0; i < checkedNodes.length; i++) {
				tree.tree('uncheck', checkedNodes[i].target);
			}
			for (var i = 0; i < uncheckedNodes.length; i++) {
				tree.tree('check', uncheckedNodes[i].target);
			}
		}

		var data = [{
			"id": 1,
			"text": "Foods",
			"attributes": {
				"type": "dept"
			},
			"children": [{
				"id": 2,
				"text": "Fruits22",
				"state": "open",
				"attributes": {
					"type": "user"
				}
			}, {
				"id": 3,
				"text": "Vegetables",
				"state": "open",
				"attributes": {
					"type": "user"
				}
			}]
		}, {
			"id": 2,
			"text": "Fruits",
			"children": [{
				"id": 5,
				"text": "Fruits@@@@@",
				"checked": true,
				"state": "open",
				"attributes": {
					"type": "user"
				}
			}, {
				"id": 6,
				"text": "Vegetables!!!!!!",
				"state": "open",
				"attributes": {
					"type": "user"
				}
			}]
		}]

		$('#tree').tree({
			// url: '/data/tree.json',
			// method: 'get',
			data: data,
			animate: true,
			checkbox: true
		});

	</script>
</body>

</html>